<template>
  <a-form
    ref="AForm"
    :model="model"
    :rules="rules"
    :hide-required-mark="hideRequiredMark"
    :label-align="labelAlign"
    :layout="layout"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :colon="colon"
    :validate-on-rule-change="validateOnRuleChange"
    :scroll-to-first-error="scrollToFirstError"
    :name="name"
    :validate-trigger="validateTrigger"
    :no-style="noStyle"
  >
    <slot />
  </a-form>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { Form } from 'ant-design-vue'
export default defineComponent({
  name: 'ZForm',
  components: {
    AForm: Form
  },
  props: {
    model: {
      type: Object,
      default: undefined
    },
    rules: {
      type: Object,
      default: undefined
    },
    hideRequiredMark: {
      type: Boolean,
      default: false
    },
    labelAlign: {
      type: String,
      default: 'right'
    },
    layout: {
      type: String,
      default: 'horizontal'
    },
    labelCol: {
      type: Object,
      default: undefined
    },
    wrapperCol: {
      type: Object,
      default: undefined
    },
    colon: {
      type: Boolean,
      default: true
    },
    validateOnRuleChange: {
      type: Boolean,
      default: true
    },
    scrollToFirstError: {
      type: [Boolean, Object],
      default: true
    },
    name: {
      type: String,
      default: undefined
    },
    validateTrigger: {
      type: [String, Array],
      default: 'change'
    },
    noStyle: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    const AForm = ref()

    const validate = () => {
      return new Promise((resolve, reject) => {
        AForm.value.validate().then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
    const validateFields = (name) => {
      return new Promise((resolve, reject) => {
        AForm.value.validateFields(name).then(res => {
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    }
    const scrollToField = (name, options) => {
      return AForm.value.scrollToField(name, options)
    }
    const resetFields = () => {
      return AForm.value.resetFields()
    }
    const clearValidate = (name) => {
      return AForm.value.clearValidate(name)
    }
    return {
      AForm,
      validate,
      validateFields,
      scrollToField,
      resetFields,
      clearValidate
    }
  }
})
</script>
